<!DOCTYPE html>
<html>
<head>
    <title>瀑布流示例</title>
    <style>
        /* 瀑布流容器样式 */
        .grid {
            margin: 0 auto;
            column-gap: 20px;
        }
        /* 瀑布流元素样式 */
        .grid-item {
            width: 200px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<!-- 瀑布流容器 -->
<div class="grid">
    <!-- 瀑布流元素 -->
    <div class="grid-item"><img src="image.png" alt="Image 1"></div>
    <div class="grid-item"><img src="image.png" alt="Image 2"></div>
    <div class="grid-item"><img src="image.png" alt="Image 3"></div>
    <div class="grid-item"><img src="image.png" alt="Image 4"></div>
    <div class="grid-item"><img src="image.png" alt="Image 5"></div>
    <div class="grid-item"><img src="image.png" alt="Image 6"></div>
    <div class="grid-item"><img src="image.png" alt="Image 7"></div>
    <div class="grid-item"><img src="image.png" alt="Image 8"></div>
    <div class="grid-item"><img src="image.png" alt="Image 9"></div>
    <div class="grid-item"><img src="image.png" alt="Image 10"></div>
</div>
<!-- 引入Masonry和jQuery库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 初始化Masonry库 -->
<script>
    $(document).ready(function(){
        $('.grid').masonry({
            itemSelector: '.grid-item',
            columnWidth: 100,
            gutter: 20
        });
    });
</script>
</body>
</html>
